//获取数据
data2 = [
  { xu: 1, dui: "个人", lei: "限时监察", lian: 2123215, zhuang: "已完成" },
  { xu: 2, dui: "个人", lei: "收费监察", lian: 1200021, zhuang: "未完成" },
  { xu: 3, dui: "个人", lei: "限时监察", lian: 5481321, zhuang: "已完成" },
  { xu: 4, dui: "企业", lei: "行政审批监察", lian: 125456, zhuang: "已完成" },
  { xu: 5, dui: "个人", lei: "证照信息监察", lian: 123554, zhuang: "已完成" },
  { xu: 6, dui: "企业", lei: "限时监察", lian: 3264881, zhuang: "未完成" },
  { xu: 7, dui: "个人", lei: "收费监察", lian: 7365855, zhuang: "已完成" },
  { xu: 8, dui: "个人", lei: "限时监察", lian: 1568742, zhuang: "已完成" },
  { xu: 9, dui: "个人", lei: "行政审批监察", lian: 1365987, zhuang: "已完成" },
  { xu: 10, dui: "企业", lei: "收费监察", lian: 1365478, zhuang: "未完成" },
  { xu: 11, dui: "企业", lei: "限时监察", lian: 1356849, zhuang: "未完成" },
  { xu: 12, dui: "个人", lei: "证照信息监察", lian: 1566846, zhuang: "已完成" },
  { xu: 13, dui: "企业", lei: "收费监察", lian: 3648952, zhuang: "未完成" },
  { xu: 14, dui: "个人", lei: "行政审批监察", lian: 1568962, zhuang: "已完成" },
  { xu: 15, dui: "企业", lei: "证照信息监察", lian: 1569996, zhuang: "未完成" },
];

//获取元素
var datalist2 = document.getElementById("data-list2");
var leftbutton2 = document.getElementById("leftbutton2");
var rightbutton2 = document.getElementById("rightbutton2");

//定义添加函数
var add1 = function () {
  const tr1 = document.createElement("tr");

  const td1 = document.createElement("td");
  td1.innerHTML = data2[i].xu;
  tr1.appendChild(td1);

  const td2 = document.createElement("td");
  td2.innerHTML = data2[i].dui;
  tr1.appendChild(td2);

  const td3 = document.createElement("td");
  td3.innerHTML = data2[i].lei;
  tr1.appendChild(td3);

  const td4 = document.createElement("td");
  td4.innerHTML = data2[i].lian;
  tr1.appendChild(td4);

  const td5 = document.createElement("td");
  td5.innerHTML = data2[i].zhuang;
  tr1.appendChild(td5);

  const td6 = document.createElement("td");
  td6.innerHTML =
    "<button>" +
    "通过" +
    "</button>" +
    "<button>" +
    "驳回" +
    "</button>" +
    " " +
    "<button>" +
    "X" +
    "</button>";
  tr1.appendChild(td6);

  datalist2.appendChild(tr1);
};

//功能实现
//数据数小于页面
if (data2.length < 8) {
  for (var i = 0; i < data2.length; i++) {
    add1();
  }
}
//数据数大于页面，但可取整
else if (data2.length % 8 == 0) {
  //初始化
  for (var i = 0; i < 8; i++) {
    add1();
  }

  //点击上一页
  leftbutton2.onclick = function () {
    if (i > 8) {
      datalist2.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "对象" +
        "</th>" +
        "<th>" +
        "类型" +
        "</th>" +
        "<th>" +
        "联系方式" +
        "</th>" +
        "<th>" +
        "状态" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      i = i - 16;
      for (var j = i + 8; i < j; i++) {
        add1();
      }
    } else {
      alert("已到首页");
    }
  };

  //点击下一页
  rightbutton2.onclick = function () {
    if (i < data2.length) {
      datalist2.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "对象" +
        "</th>" +
        "<th>" +
        "类型" +
        "</th>" +
        "<th>" +
        "联系方式" +
        "</th>" +
        "<th>" +
        "状态" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      for (var k = i + 8; i < k; i++) {
        add1();
      }
    } else {
      alert("已到尾页");
    }
  };
}
//数据数大于页面，但不可取整
else {
  //初始化
  for (var i = 0; i < 8; i++) {
    add1();
  }

  //点击上一页
  leftbutton2.onclick = function () {
    if (i == data2.length) {
      datalist2.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "对象" +
        "</th>" +
        "<th>" +
        "类型" +
        "</th>" +
        "<th>" +
        "联系方式" +
        "</th>" +
        "<th>" +
        "状态" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      i = i - 8 - (data2.length % 8);
      for (var j = i + 8; i < j; i++) {
        add1();
      }
    } else if (i > 8) {
      datalist2.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "对象" +
        "</th>" +
        "<th>" +
        "类型" +
        "</th>" +
        "<th>" +
        "联系方式" +
        "</th>" +
        "<th>" +
        "状态" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      i = i - 16;
      for (var j = i + 8; i < j; i++) {
        add1();
      }
    } else {
      alert("已到首页");
    }
  };

  //点击下一页
  rightbutton2.onclick = function () {
    if (data2.length - i == data2.length % 8) {
      datalist2.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "对象" +
        "</th>" +
        "<th>" +
        "类型" +
        "</th>" +
        "<th>" +
        "联系方式" +
        "</th>" +
        "<th>" +
        "状态" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      for (var k = data2.length % 8; i - data2.length < k; i++) {
        add1();
      }
    } else if (i == data2.length) {
      alert("已到尾页");
    } else {
      datalist2.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "对象" +
        "</th>" +
        "<th>" +
        "类型" +
        "</th>" +
        "<th>" +
        "联系方式" +
        "</th>" +
        "<th>" +
        "状态" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      for (var k = i + 8; i < k; i++) {
        add1();
      }
    }
  };
}
